<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>	
		<title>AJAX BLOG</title>
		
		<!-- css for project -->
		
		<link rel="stylesheet" type="text/css" href="demo-blog.css" >
			
		
		<!-- nextdb ajax database api -->
		<script src="../api.js"></script>
		
		<!-- code for the blog -->
		<script src="demo-blog.js"></script>
		
		
		<!-- Skin CSS file --> 
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/assets/skins/sam/skin.css"> 
		<!-- Utility Dependencies --> 
		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>  
		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>  
		<!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> 
		<script src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script> 
		<!-- Source file for Rich Text Editor--> 
		<script src="http://yui.yahooapis.com/2.5.1/build/editor/simpleeditor-beta-min.js"></script> 
		
		<script type="text/javascript">


		</script>
	</head>
	<body onload="init();" class=" yui-skin-sam">		
		<center>
			<div style="background:url('img/demo-blog-header.gif'); width:900px; height:74px;position:relative">
				<br/>
				<div style="float:right; ">
					<table>
						<tr>
							<td>
								<span id="navlinks" style="display:none"><a href='#' onclick="byId('edit').style.display='none';byId('viewblog').style.display='none';byId('allblogs').style.display='none';byId('welcome').style.display='block';" class="nav">My Blogs</a> | <a href='#'  onclick="byId('viewblog').style.display='none';byId('allblogs').style.display='block';byId('welcome').style.display='none';byId('edit').style.display='none';getAllBlogs();" class="nav">Public Blogs</a> | <a href='#'  onclick="window.location='demo-blog.html'" class="nav">Logout</a>&nbsp;&nbsp;&nbsp;<br/></span>
								
								<div id="userinfo" class="myaccount"></div> 
							</td>
							<td>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							</td>
						</tr>
					</table>
				</div>
				<br/>
				<div class="nav">
				</div>
			</div>
			
			
			<!--BODY-->
			<div class="content" style="overflow:auto;">
				
				
				
				<!-- LOGIN -->
				
				
				
				<div id="login" style="display:none;">
					<table style="width:900px">
						<tr>
							<td valign="top">
								<div class="mod">
									<div class="mod0">
										<div class="mod1">
											<div class="mod2">
												<div id="loginError" class="errors">&nbsp; &nbsp;
												</div>
												<table>
													<tr>
														<td>Email</td>
														<td><input type="text" name="login" id="emailfield" value=""></td>
													</tr>
													<tr>
														<td>Password</td>
														<td><input type="password" name="pwd" id="passwordfield" value=""></td>
													</tr>
													<tr>
														<td>
															<input type="checkbox" class="checkbox" name="checkbox" id="rememberLogin"/>
															remember
														</td>
														<td>
															<input type="button" class="button" onclick="login(this)" value="login"> 
															<a href="#" onclick="byId('login').style.display='none';byId('createAccount').style.display='block'; setCaptcha(); clearErrors(); return false;">register</a>
														</td>
													</tr>
												</table>
											</div>
										</div>
									</div>
								</div>
								
							</td>
							<td valign="top" style="width:450px">
								<div class="mod" style="float:right;">
									<div class="mod0">
										<div class="mod1">
											<div class="mod2">
												<br/>
												<br/>
												Welcome to the open source Ajax Blog Project.
												<br/>
												<br/>
												This uses NextDB.net and YUI to build a fully
												<br/>
												CRUD enabled, secure and serverless blog system.
												<br/>
												<br/>
												To use this system you need to get an alpha account
												<br/>
												from NextDB.net.  It is easy and free to sign up.
												
												
												
											</div>
										</div>
									</div>
								</div>								
							</td>
						</tr>
					</table>
				</div>
				
				
				
				<!-- CREATE ACCOUNT -->
				
				
				
				<div id="createAccount" style="display:none;">
					<table></table>
					<div class="mod">
						<div class="mod0">
							<div class="mod1">
								<div class="mod2">
									<div id="createAccountError" class="errors">&nbsp; &nbsp;
									</div>
									<table>
										<tr>
											
											<td>First Name</td>
											<td><input type="text" name="first_name" value=""> </td>
										</tr>
										<tr>
											<td>Last Name</td>
											<td><input type="text" name="last_name" value=""> </td>
										</tr>
										
										<tr>
											<td>Email</td>
											<td><input type="text" name="email" value="">
											</td>
										</tr>
										<tr>
											<td>Password</td>
											<td><input type="password" name="password" value=""> </td>
											
										</tr>
										<tr>
											<td>Re-enter</td>
											<td><input type="password" name="password2" value=""> </td>
										</tr>
										<tr>
											<td>[click image <br>to refresh]</td>
											
											<td>
												<img id="captchaPic"  onclick="net.nextdb.Util.getCaptchaURL(this);return false;">
											</td>
										</tr>
										<tr>
											<td>Enter Text:</td>
											
											<td>
												<input type="text" name="captcha" value="">
											</td>
										</tr>
										<tr>
											<td>
											</td>
											
											<td>
												<input type="button" class="button" onclick="createAccount(this)" value="create account"> 
												<input type="button" class="button" onclick="byId('login').style.display='block';byId('createAccount').style.display='none';" value="cancel"> 
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
					
					
				</div>
				
				
				
				
				<!-- USERS -->
				
				
				
				<div id="allblogs" style="display:none;">
					<table></table>
					<div class="mod">
						<div class="mod0">
							<div class="mod1">
								<div class="mod2">
									<div id="allblogslist"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
				
				<!-- VIEW -->
				
				
				
				<div id="viewblog" class="stretch" style="display:none"></div>
				
				
				
				<!-- EDIT -->
				
				
				
				<div id="edit" style="display:none">
					<br/>
					<br/>
					<center>
						<table>
							<tr>
								<td>
									Title:			
								</td>
								<td>
									<input type="text" id="blogtitle" class="title"/>						
								</td>
							</tr>
						</table>
						<br/>
						<!--YUI  -->
						<form method="post" action="#" id="form1" style="display:block">
							<textarea id="blogbody" name="blogbody" rows="20" cols="75" style="display:block">
							</textarea>
						</form>
						<br/>
						<input type="button" onclick="cancelBlogEntry();" value="cancel" class="button"/>
						<input type="button" onclick="submitBlogEntry();" value="submit!" class="button"/>
					</center>
				</div>
				
				
				
				<!-- WELCOME -->
				
				
				
				<div id="welcome" style="display:none">
					<div>
						<table>
							<tr>
								<td>
									Create New Blog										
								</td>
								<td>
									<input type="text" id="blogname" class="text"/>
								</td>
								<td>
									<input type="button" onclick="createBlog();" value="create!" class="button"/>
								</td>
								<td>
								</td>
							</tr>
						</table>
					</div>
					<table style="width:900px">
						<tr>
							<td valign="top">
								<div class="mod">
									<div class="mod0">
										<div class="mod1">
											<div class="mod2">
												<div id="myblogs" style="float:left"></div>
											</div>
										</div>
									</div>
								</div>
							</td>
							<td valign="top">
								<div class="mod" style="float:right;display:none;" id="rightPanel">
									<div class="mod0">
										<div class="mod1">
											<div class="mod2">
												<div id="myblogentries"></div>
											</div>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</table>			
				</div>
			</div>
		</center>
	</body>
</html>
